<script lang="ts" setup>
import { RefundStatus } from '@/constants/orders';
import { RouteMap, useRouter } from '@/router';
import { useAuthStore } from '@/store/auth';
import { useLocale } from '@/locale/locale';

const { t } = useLocale();
const authStore = useAuthStore();
const router = useRouter();

interface ComponentProps {
  id?: number;
  amount?: number;
  orderNo?: string;
  refundStatus?: string;
  charges?: { date: string; amount: number }[];
}

// 使用 defineProps 接收父组件传来的参数
const props = defineProps<ComponentProps>();

function gotoCs() {
  if (authStore.isLoggedIn) {
    uni.navigateTo({
      url: '/pages/cs/cs?type=1&id=' + props.id
    });
  } else {
    uni.navigateTo({
      url: '/pages/auth/login'
    });
  }
}

function handleCopy() {
  uni.setClipboardData({
    data: props.orderNo as string
  });
}
</script>

<template>
  <apt-section custom-style="margin-bottom: 20rpx">
    <view class="mb-2 flex items-baseline">
      <view class="mr-2 text-sm text-primary font-medium">{{ t('LOKey_orderTotalAmount') }}:</view>
      <view class="text-sm text-red">
        <text>¥</text>
        <text class="text-lg font-medium">{{ amount }}</text>
      </view>
    </view>

    <view class="mb-4 flex items-center">
      <view class="mr-2 text-xs text-fourth">{{ t('LOKey_orderNo') }}:</view>
      <view class="mr-2 text-xs text-fourth">
        {{ orderNo }}
      </view>
      <view class="flex items-center" @click="handleCopy">
        <image class="order-details__cancelled-extra-copy-icon" src="/static/icon_copy.png"></image>
        <view class="text-xs text-fourth">
          {{ t('LRKey_copy') }}
        </view>
      </view>
    </view>

    <!-- 付款后取消 -->
    <template v-if="refundStatus && refundStatus !== RefundStatus.WAIT">
      <view class="order-details__cancelled-extra-divider"></view>
      <view
        class="flex items-center pb-4"
        @click="
          router.to(RouteMap.orderRefundDetails, {
            orderSn: orderNo,
            status: 'DONE',
            charges: JSON.stringify(charges)
          })
        "
      >
        <text class="order-details__cancelled-extra-refunded--before">
          {{ t('LOKey_orderRefundSuccess') }}
        </text>
        <text class="order-details__cancelled-extra-refunded--after">
          {{ t('LOKey_orderRefundDetail') }}
        </text>
      </view>
      <view class="order-details__cancelled-extra-divider"></view>
    </template>

    <view class="order-details__cancelled-extra-customer" @click="gotoCs">
      <image class="mr-1 w-4 h-4" src="/static/order_details_cancelled_extra_customer.png"></image>
      <text class="text-sm text-primary">
        {{ t('tripChangeFeedbook') }}
      </text>
    </view>
  </apt-section>
</template>

<style>
.order-details__cancelled-extra-copy-icon {
  width: 28rpx;
  height: 28rpx;
}

.order-details__cancelled-extra-divider {
  height: 2rpx;
  margin-bottom: 32rpx;
  background-color: #f4f4f4;
}

.order-details__cancelled-extra-refunded--before {
  font-size: 22rpx;
  line-height: 24rpx;
  color: #999999;
}

.order-details__cancelled-extra-refunded--after {
  font-size: 22rpx;
  line-height: 24rpx;
  color: #006ff6;
}

.order-details__cancelled-extra-customer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 22rpx 0;
  background-color: #eff9f6;
  border-radius: 8rpx;
}
</style>
